<template>
    <div >
        <div id="jx-contain">

            <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" src="../../../../static/generic/web/viewer.html?file=./../../../static/123.pdf" frameborder="0"></iframe>
            <div class="sideBox">
                <ul>
                    <li @click="drawShowEvent"><i class="iconfont icon-bianji-shi"></i>画笔</li>
                    <li @click="dialogVisible2 = true" ><i class="iconfont icon-shipin1"></i>视频</li>
                    <li @click="openNoteWindow"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    <li @click="dialogVisible4 = true"><i class="iconfont icon-wenda2"></i>提问</li>
                </ul>
            </div>
        </div>
        <!-- 视频盒子 -->
        <el-dialog
        title="视频"
        :visible.sync="dialogVisible2"
        width="1230px"
        >
       <video id="video" style="height:602px;" autoplay controls class="videoShow" :src="videoUrl" ></video>
        </el-dialog>
        <!-- 笔记盒子 -->
        <div  class="el-dialog__wrapper" id="onlyDialog">
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">笔记</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea>
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="noteEvent" class="button-style saveNote">保存</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 提问盒子 -->
        <div  class="el-dialog__wrapper" id="issueDialog">
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 410px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">提问</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <ul>
                        <li>
                           <p>
                               <span class="titleHead">简答题</span>
                               <span class="titleName">1、JS可视化插件都有哪些？</span>
                               <span class="tltleBtnBox"><button @click="getShortEvent" class="button-style getQueShort">提问</button></span>
                           </p>
                            <i class="clear-fix"></i>
                           <p>
                               <span class="answered">已回答：32人</span>
                               <span class="level">
                                   <i>优 100%</i>
                                   <i>良 100%</i>
                                   <i>差 100%</i>
                               </span>
                               <span class="delBtnBox"><button class="button-style delQue">删除</button></span>
                           </p>
                           <i class="clear-fix"></i>
                        </li>
                         <li>
                           <p>
                               <span class="titleHead">判断题</span>
                               <span class="titleName">1、JS可视化插件都有哪些？</span>
                               <span class="tltleBtnBox"><button class="button-style getQueCheck">提问</button></span>
                           </p>
                            <i class="clear-fix"></i>
                           <p>
                               <span class="answered">已回答：32人</span>
                               <span class="level">
                                  正确率 80%
                               </span>
                               <span class="delBtnBox"><button class="button-style delQue">删除</button></span>
                           </p>
                           <i class="clear-fix"></i>
                        </li>
                         <li>
                           <p>
                               <span class="titleHead">判断题</span>
                               <span class="titleName">1、JS可视化插件都有哪些？</span>
                               <span class="tltleBtnBox"><button class="button-style getQueCheck">提问</button></span>
                           </p>
                            <i class="clear-fix"></i>
                            <p>
                                <span class="delBtnBox"><button  @click="getDetailEvent" class="button-style ownDetail">本次</button></span>
                               <span class="answereds">回答：32人&emsp;正确 80%&emsp;&emsp;<a @click="getDetailEvent" class="ownDetail" href="javascript:;">详情</a></span>
                               <span class="delBtnBox"><button class="button-style delQue">删除</button></span>
                           </p>
                           <i class="clear-fix"></i>
                           <p>
                               <span class="answered">已回答：32人</span>
                               <span class="level">
                                  正确率 80%
                               </span>
                               <!-- <span class="delBtnBox"><button class="button-style delQue">删除</button></span> -->
                           </p>
                           <i class="clear-fix"></i>
                        </li>
                    </ul>
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer dialogHr">
                        <i @click="issueAddEvent" class="issueAddBtn">+</i>
                    </span>
                </div>
            </div>
        </div>
        <!-- 绘画盒子 -->
        <div id="drawBox">
            <i @click="drawTypeChange('rect','squre')" class="squre type"></i>
            <i @click="drawTypeChange('circle','circle')" class="circle type"></i>
            <i @click="drawTypeChange('pen','pen')" class="pen type iconfont icon-icon--"></i>
            <i class="recall iconfont icon-fanhui2"></i>
            <i class="clean">清除</i>
            <i class="exit">退出</i>
            <div id="penOption">
                <div></div>
                <div>
                    <i @click="penSizeChange('6','point1')" class="point point1"><span></span></i>
                    <i @click="penSizeChange('10','point2')" class="point point2"><span></span></i>
                    <i @click="penSizeChange('14','point3')" class="point point3"><span></span></i>
                    <i @click="penColorChange('#ff0f00','colorRed')" class="colorBtn colorRed"></i>
                    <i @click="penColorChange('#ffbe00','colorYel')" class="colorBtn colorYel"></i>
                    <i @click="penColorChange('#1a9bff','colorBul')" class="colorBtn colorBul"></i>
                    <i @click="penColorChange('#1aad19','colorGre')" class="colorBtn colorGre"></i>
                    <i @click="penColorChange('#4d4d4d','colorBla')" class="colorBtn colorBla"></i>
                </div>
            </div>

        </div>
         <canvas id="drawCanvas"></canvas>
         <!-- 问题详情 -->
         <el-dialog
            title="详情"
            :visible.sync="questionVisible"
            width="490px"
            id="yquestionDetailBox"
            >
            <div class="title">正确：22人</div>
            <div class="isOkName">王小胖、张小帅、冯小球、岳小强、李小乐、王小帅、小七
王小胖、张小帅、冯小球、岳小强、李小乐、王小帅、小七</div>
            <div class="title">错误：22人</div>
            <div class="isNoName">王小胖、张小帅、冯小球、岳小强、李小乐、王小帅、小七
王小胖、张小帅、冯小球、岳小强、李小乐、王小帅、小七</div>
            <span slot="footer" class="dialog-footer">
                <button class="button-style" @click="questionVisible = false">确 定</button>
            </span>
            </el-dialog>
        <!-- 添加问题 -->
            <el-dialog
            title="添加提问"
            :visible.sync="questionAddVisible"
            width="490px"
            id="yquestionAddBox"
            >
            <template>
                <el-radio  v-model="radio" label="1">判断题</el-radio>
                <el-radio  v-model="radio" label="2">简答题</el-radio>
            </template>
            <div class="checkBox">
                <label class="queNameBox">问题：<el-input class="checkInput" v-model="checkQueVal" placeholder="请输入内容"></el-input></label>

                <div v-show="radio == 1">
                    <i class="queAnsBox">答案：</i>
                     <template>
                        <el-radio  v-model="radios" label="1">对</el-radio>
                        <el-radio  v-model="radios" label="2">错</el-radio>
                    </template>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                 <button class="button-style queAddOkBtn" @click="questionAddEvent">确 定</button>
                <button class="button-style" @click="questionAddVisible = false">取 消</button>
            </span>
            </el-dialog>
            <!-- 随机点名 -->
            <el-dialog
            title="随堂提问"
            :visible.sync="shortVisible"
            width="600px"
            id="yquestionSetPeo"
            :close-on-click-modal=false
            >
            <div>1、Linux不支持zip命令？</div>
            <div class="nameScrollBox" @click="nameScroll"><i class="iconfont icon-shishidianming"></i><i v-html="nameScrollBtn"></i></div>
            <div class="nameDefault" v-html="nameDefault">

            </div>
            <template>
                <el-radio v-model="level" label="1">优秀</el-radio>
                <el-radio v-model="level" label="2">良好</el-radio>
                <el-radio v-model="level" label="3">较差</el-radio>
                <el-radio v-model="level" label="4">旷课</el-radio>
            </template>
            <span slot="footer" class="dialog-footer">
                 <button class="button-style queSetOkBtn" @click="questionAddEvent">确 定</button>
                <button class="button-style" @click="questionAddVisible = false">取 消</button>
            </span>
            </el-dialog>
    </div>
</template>
<script>
    import $ from "jquery";
    // 绘画
    function Draw(obj,setting){
        this.obj=obj;
        this.type=setting.type||"stroke";
        this.color=setting.color||"#000";
        this.width=setting.width||"1";
    }
    Draw.prototype={
        init:function(){
            this.obj.strokeStyle=this.color;
            this.obj.fillStyle=this.color;
            this.obj.lineWidth=this.width;
        },
            line:function(x,y,x1,y1){
            this.init();
            this.obj.beginPath();
            this.obj.moveTo(x,y);
            this.obj.lineTo(x1,y1);
            this.obj.stroke();
        },
        rect:function(x,y,x1,y1){
            this.init();
            this.obj.beginPath();
            this.obj.rect(x,y,x1-x,y1-y);
            if(this.type=="stroke"){
                this.obj.stroke();
            }else if(this.type=="fill"){
                this.obj.fill();
            }
        },
        circle:function(x,y,x1,y1){
            this.init();
            console.log("sadasd")
            var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));
            this.obj.beginPath();
            this.obj.arc(x,y,r,0,2*Math.PI);
            if(this.type=="stroke"){
                this.obj.stroke();
            }else if(this.type=="fill"){
                this.obj.fill();
            }
        },
        pen:function(x,y,x1,y1){
            this.init();
            this.obj.save();
            this.obj.lineCap="round";
            this.obj.lineTo(x1,y1);
            this.obj.stroke();
            this.obj.restore();
        }
    }
    export default{
        data(){
            return {
                wid:0,
                hei:0,
                videoUrl:'',
                dialogVisible1:false,
                dialogVisible2:false,
                dialogVisible3:false,
                dialogVisible4:false,
                noteVal:'sadasd',
                penColor:'#ff0f00',
                penSize:'6',
                drawType:'pen',
                questionVisible:false, //问题详情显隐
                questionAddVisible:false,//添加提问显隐
                radio:'1',//添加问题类型
                checkQueVal:'123',//判断题试题名称
                shortQueVal:'fdsf',//简单题试题名称
                radios:'1',//判断题对错
                shortVisible:false,//简答题随机点名显隐
                level:'1',//随机点名等级评定
                isStop:false,//点名停止判定
                nameArr:[1,2,3,4,5,6,7],
                nameDefault:"名称滚动",
                nameScrollBtn:"随机点名",
                timer:''
            }
        },
        methods:{
            nameScroll(){
                //名字滚动
                if(this.isStop == false){
                    this.isStop = true;
                    this.nameScrollBtn = "停止点名";
                    let n = 0;
                    let self = this;
                    self.timer = setInterval(()=>{
                        self.nameDefault = self.nameArr[n]
                        n++;
                        if(n>=self.nameArr.length){
                            n = 0;
                        }
                    },200);
                }else{
                    clearInterval(this.timer);
                    this.nameScrollBtn = "随机点名";
                    this.isStop = false;
                }

            },
            getShortEvent(){
                //简答题随机点名
                this.shortVisible = true;
            },
            questionAddEvent(){

            },
            issueAddEvent(){
                //问题添加
                this.questionAddVisible = true;
            },
            getDetailEvent(){
                //获取本次详情
                this.questionVisible = true;
            },
            penColorChange(val,name){
                //获取绘图颜色
                this.penColor = val;
                 $(".colorBtn").attr("style","");
                 $("."+name).css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid"+this.penColor});
            },
            penSizeChange(val,name){
                //获取绘图大小
                this.penSize = val;
                 $(".point>span").css("background","#dddddd");
                 $("."+name+">span").css("background","#1aad19");
            },
            drawTypeChange(val,name){
                //绘图类型
                this.drawType = val;
                if(this.drawType == "pen"){
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $(".pen").css("color","#1277eb");
                }else{
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $("."+name).css("border-color","#1277eb");
                }
            },
            closeNoteWindow(){
                $("#onlyDialog").hide();
            },
            openNoteWindow(){
                $("#onlyDialog").show();
            },
            drawEvent(){
                //绘图
                let canvas = document.getElementById("drawCanvas");
                let obj = canvas.getContext("2d");
                let colorchoose = this.penColor;
                let widthchoose = this.penSize;
                let typechoose=$(".type");
                let back=$(".recall");
                let clear=$(".clean");
                let exit = $(".exit");
                let linewidth="1";
                let cutflag=false;
                let screenWidth=document.documentElement.clientWidth;
                let screenHeight=document.documentElement.clientHeight;
                let width=screenWidth;
                let height=screenHeight;
                canvas.width=width;
                canvas.height=height;
                let iscut=true;
                let style="stroke";
                let color=this.penColor;
                let arr=[];
                let self = this;
                // 撤销
                back.click(function(){
                    arr.pop();
                    obj.clearRect(0,0,width,height);
                    if(arr.length>0){
                        obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
                    }
                })
                // 清除
                clear.click(function(){
                    arr=[];
                    obj.clearRect(0,0,width,height);

                })
                //退出
                exit.click(function(){
                    arr=[];
                    obj.clearRect(0,0,width,height);
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $(".pen").css("color","#1277eb");
                    $(".point>span").css("background","#dddddd");
                    $(".point1>span").css("background","#1aad19");
                    $(".colorBtn").attr("style","");
                    $(".colorRed").css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid #ff0f00"});
                    self.drawType = "pen";
                    self.penSize = "6";
                    self.penColor = "#ff0f00";
                    $("#drawBox,#drawCanvas").hide();

                })
                let x,y,w,h;
                let lx,ly,lw,lh;
                let cutdata;

                canvas.onmousedown=function(e){
                    x=e.offsetX;
                    y=e.offsetY;

                    if(self.drawType=="pen"){
                        obj.beginPath();
                        obj.moveTo(x,y);

                    }
                    let draw=new Draw(obj,{type:style,color:self.penColor,width:self.penSize});//实例化构造函数
                    canvas.onmousemove=function(e){
                        w=e.offsetX;
                        h=e.offsetY;
                        if(self.drawType!="eraser"){
                            obj.clearRect(0,0,width,height);
                            if(arr.length!=0){
                                obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
                            }
                        }
                        if(cutflag&&self.drawType=="cut"){
                            if(iscut){
                                obj.clearRect(lx,ly,lw-lx,lh-ly);
                            }
                            var nx=lx+(w-x);
                            var ny=ly+(h-y);
                            obj.putImageData(cutdata,nx,ny);
                        }else if(self.drawType=="poly"){
                            draw[type](x,y,w,h,n);
                        }else{
                            draw[self.drawType](x,y,w,h);
                        }
                    }
                    document.onmouseup=function(){
                        canvas.onmousemove=null;
                        document.onmouseup=null;

                        arr.push(obj.getImageData(0,0,width,height));
                    }
                }
            },
            drawShowEvent(){
                // 画布显示
                $("#drawBox,#drawCanvas").show();
                 this.drawEvent();
                 $(".colorRed").css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid #ff0f00"});
            },
            noteEvent(){

            },
            issueEvent(){

            }
        },
        mounted(){
            let screenWidth=document.documentElement.clientWidth;
            let screenHeight=document.documentElement.clientHeight;
            this.wid = screenWidth;
            this.hei = screenHeight-8;
        }
    }
</script>
<style>
    /* 问题添加盒子 */
#yquestionAddBox .el-dialog__body{
    padding: 37px 42px;
}
#yquestionAddBox .button-style,#yquestionSetPeo .button-style{
    padding: 0;
    height: 32px;
    width: 90px;
    margin: 0 auto;
}
#yquestionAddBox .dialog-footer,#yquestionSetPeo .dialog-footer{
    display: block;
    text-align: center;
}
#yquestionAddBox .checkBox{
    margin-top: 40px;
}
#yquestionAddBox .el-input__inner{
    width: 330px;
    margin-left: 18px;
}
#yquestionAddBox .queNameBox{
    margin-bottom: 22px;
    display: block;
}
#yquestionAddBox .queAnsBox{
   margin-right: 18px;
}
#yquestionAddBox .queAddOkBtn,#yquestionSetPeo .queSetOkBtn{
    margin-right: 20px;
}
#yquestionAddBox .el-input{
    width: auto;
}
/* 随堂练习 */
#yquestionSetPeo .el-dialog__body{
    padding: 62px 128px;
}
#yquestionSetPeo .el-dialog__body>div:nth-of-type(1){
    font-size: 18px;
    color: #474747;
    margin-bottom: 20px;
}
#yquestionSetPeo .el-dialog__body .nameScrollBox{
    text-align: center;
    font-size: 16px;
    color: #1277eb;
}
#yquestionSetPeo .el-dialog__body  .nameDefault{
    height: 130px;
    line-height: 130px;
    text-align: center;
    font-size: 30px;
}
   /* 问题详情盒子 */
#yquestionDetailBox .el-dialog__body{
    padding: 50px 60px;
}
#yquestionDetailBox .title{
    font-size: 16px;
    margin-bottom: 25px;
    color: #727272;
}
#yquestionDetailBox .isOkName,#yquestionDetailBox .isNoName{
    font-size: 14px;
    color: #727272;
    line-height: 1.7;
}
#yquestionDetailBox .isOkName{
    margin-bottom: 46px;
}
#yquestionDetailBox .button-style{
    padding: 0;
    height: 32px;
    width: 90px;
    margin: 0 auto;
}
#yquestionDetailBox  .dialog-footer{
    display: block;
    text-align: center;
}
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";

// 绘画盒子
.styleactive{
    color: #ffa800;
    background-color:#fff;
    box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
}
 #drawCanvas{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    display: none;
}

#drawBox{
    width:320px;
    height: 70px;
    position: absolute;
    z-index: 10;
    top:50px;
    right: 95px;
    background:$white;
    border-radius:5px;
    font-size: $fs16;
   display: none;
    i{
        float: left;
        height: 18px;
        margin-top:26px;
        cursor: pointer;
        margin-left: 25px;
          color: #474747;
    }
    .pen{
        color:#1277eb;
    }
    .squre{
        width: 20px;
        border: 1px solid $title-gray;
        height: 16px;
    }
    .circle{
        width: 16px;
        border: 1px solid $title-gray;
        height: 16px;
        border-radius: 50%;
    }
    .pen,.recall{
        font-size: 18px;
    }
    #penOption{
        height: 44px;
        width: 230px;
        position: absolute;
        top: 80px;
        left: 10px;
        div:nth-of-type(1){
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-bottom: 8px solid white;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin: 0 auto;
        }
        div:nth-of-type(2){
            background: $white;
            border-radius: $br5;
            height: 36px;
            width: 230px;
            margin: 0;
            .colorBtn{
                height: 16px;
                width: 16px;
                 margin: 10px 0 0 12px;
            }
            .colorRed{
                background: #ff0f00;
            }
            .colorYel{
                background: #ffbe00;
            }
            .colorBul{
                background: #1a9bff;
            }
            .colorGre{
                background: #1aad19;
            }
            .colorBla{
                background: #4d4d4d;
            }
            .point1,.point2,.point3{
                width: 14px;
                height:14px;
                margin: 11px 0 0 12px;
            }
            .point1{
                span{
                    background:#1aad19;
                    border-radius: $br50;
                    height: 6px;
                    width: 6px;
                    display: block;
                    margin: 5px;
                }
            }
            .point2{
                span{
                    background:$gray;
                    border-radius: $br50;
                    height: 10px;
                    width: 10px;
                    display: block;
                    margin: 2px;
                }
            }
            .point3{
                span{
                    background:$gray;
                    border-radius: $br50;
                    height: 14px;
                    width: 14px;
                    display: block;
                    margin: 0;
                }
            }
        }
    }
}
// 笔记盒子 提问盒子
    #onlyDialog{
        height: 396px;
        width: 490px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;
        display: none;
    }
    #issueDialog{
        width: 410px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;
    }
    #onlyDialog .el-dialog,#issueDialog  .el-dialog{
        border-radius: 5px;
        margin: 0!important;
        padding: 0;

    .el-dialog__header {
        background: $white;

        height: auto;
        line-height:initial;
        padding: 20px 20px 10px;

        .el-dialog__title {
            color: #070e28;
            line-height: 24px;
            font-size: 16px;
            float: left;
        }
    }

    .el-dialog__headerbtn {
        top: 20px;

        .el-dialog__close {
            color: #070e28;

            &:hover {
                color: #070e28;
            }
        }
    }
    #noteVal{
        overflow: auto;
    }
}
    .saveNote{
        width: 90px;
        height: 32px;
        margin-right: 180px;
    }
    //提问盒子
    .issueAddBtn{
        width: 368px;
        height: 46px;
        border: 1px solid #e1e1e1;
        text-align: center;
        line-height: 46px;
        font-size: 20px;
        display: block;
        color: #b8b8b8;
        border-radius: 5px;
        cursor: pointer;
    }
    #issueDialog .el-dialog__body ul li p{
        min-height: 30px;
    }
    #issueDialog .el-dialog__body ul li p>span{
        float: left;
        line-height: 1.7;
    }
    #issueDialog .el-dialog__body ul li p:nth-of-type(2){
        font-size: $fs14;
    }
    #issueDialog .el-dialog__body ul li {
        margin-bottom: 25px;
        padding-bottom: 18px;
        border-bottom: 1px solid #e8e8e8;
    }
    #issueDialog .el-dialog__footer{
        padding: 0 20px 20px;
    }
    #issueDialog .el-dialog__body{
            padding: 30px 20px 0;
    }
    .answered{
        width: 90px;
        margin-right: 10px;
    }
    .answereds{
        width: 236px;
        margin: 0 18px 0 14px;
        a{
            text-decoration:underline;
            color: #385899;
        }
    }
    .level{
        width: 200px;
        margin-right: 18px;
    }
    .titleHead{
        width: 50px;
        font-size: $fs16;
        color: #385899;
        margin-right: 20px;
    }
    .titleName{
        width: 230px;
        font-size: $fs16;
        color: $title-gray;
        word-break: break-all;
        margin-right: 18px;
    }
    #issueDialog .el-dialog__body button{
        height: 22px;
        width: 50px;
        font-size: 14px;
        padding: 0;
        line-height: 22px;
        margin-top: -3px;
    }
    //主体
    #jx-contain{
        position: relative;
        .sideBox{
            position: absolute;
            top:50px;
            right:25px;
            width: 60px;
            height: 320px;
            background: #1c1f21;
            color: $white;
            text-align: center;
            border-radius: 5px;
            li{
                height: 36px;
                width: 25px;
                display: block;
                font-size: 12px;
                margin: 20px auto 44px;
                position: relative;
                cursor: pointer;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;

                }

            }
        }

    }
</style>
